<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="header">
			<view class="left">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="info">
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view class="post">
						{{userInfo.department_name}}
					</view>
				</view>
			</view>
			<!-- <view class="right" @tap="routerTo('/pages/pageB/data/clockDetail')">
				<image src="@/static/img/clockinicon.png" mode=""></image>
				<view class="msg">
					打卡详情
				</view>
			</view> -->
		</view>
		<view class="con" v-if="isShow">
			<view class="one">
				<h3>上午卡</h3>
				<view class="in">
					<view class="box">
						<view class="time">
							{{list1[0].start}} - {{list1[0].end}}
						</view>
						<view class="msg">
							<view class="on" v-if="list1[0].sign_time">
								<image src="@/static/img/Group.png" mode=""></image>
								<span>{{list1[0].sign_time}}已打卡</span>
							</view>
							<view class="on" v-else>
								<span>未打卡</span>
							</view>
						</view>
					</view>
					<view class="box">
						<view class="time">
							{{list1[1].start}} - {{list1[1].end}}
						</view>
						<view class="msg">
							<view class="on" v-if="list1[1].sign_time">
								<image src="@/static/img/Group.png" mode=""></image>
								<span>{{list1[1].sign_time}}已打卡</span>
							</view>
							<view class="on" v-else>
								<span>未打卡</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="one">
				<h3>下午卡</h3>
				<view class="in">
					<view class="box">
						<view class="time">
							{{list1[2].start}} - {{list1[2].end}}
						</view>
						<view class="msg">
							<view class="on" v-if="list1[2].sign_time">
								<image src="@/static/img/Group.png" mode=""></image>
								<span>{{list1[2].sign_time}}已打卡</span>
							</view>
							<view class="on" v-else>
								<span>未打卡</span>
							</view>
						</view>
					</view>
					<view class="box">
						<view class="time">
							{{list1[3].start}} - {{list1[3].end}}
						</view>
						<view class="msg">
							<view class="on" v-if="list1[3].sign_time">
								<image src="@/static/img/Group.png" mode=""></image>
								<span>{{list1[3].sign_time}}已打卡</span>
							</view>
							<view class="on" v-else>
								<span>未打卡</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isClock" class="btn" @tap="clockIn">
				打卡
			</view>
			<view v-else class="btn none" @tap="fanwei">
				打卡
			</view>
			<view class="prompt" v-if="inTime">
				<span v-if="isClock">您已进入打卡范围</span>
				<span v-else>距打卡点 {{ distance }} 米</span>
			</view>
			<view class="prompt" v-else>
				<span>未在打卡时间内</span>
			</view>
		</view>
		<u-modal :show="show" confirmText="去打卡" @confirm="routerTo('/pages/pageB/data/clockIn')"
			:closeOnClickOverlay="true" @close="show = false" :showConfirmButton="false">
			<view class="slot-content">
				<view class="modalCon">
					<image class="close" src="@/static/img/close.png" mode="" @tap="show = false"></image>
					<image class="bg" src="@/static/img/clockBg.png" mode=""></image>
					<view class="time">
						{{ nowClock }}
					</view>
					<view class="msg">
						打卡成功
					</view>
				</view>
			</view>
		</u-modal>
		<u-notify :show="show1" ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		todaySign,
		signTimes,
		innerinfo,
		getDistance,
		signing
	} from '@/api/inner.js'
	import {
		getConfigs
	} from '@/api/user.js';
	export default {
		data() {
			return {
				show: false,
				list1: [],
				isShow: false,
				userInfo: {},
				isClock: false,
				time: '',
				sdistance: '',
				distance: '',
				inTime: false,
				watermark: '',
				nowClock: '',
				show1: true
			}
		},
		onLoad(e) {
			console.log(e)
			this.watermark = uni.getStorageSync('watermark')
			this.inTime = e.show
			getConfigs({
				name: 'distance'
			}).then((res) => {
				if (res.code == 1) {
					this.sdistance = res.data.value
				} else {
					uni.showToast({
						title: '获取打卡范围失败',
						icon: 'none'
					})
				}
			});
			this.getUserInfo()
			this.getSign()
			// this.$refs.uNotify.show({
			// 	top: 0,
			// 	type: 'error',
			// 	color: '#000',
			// 	bgColor: '#fff',
			// 	message: 'APP需要您的同意才能获取您的位置信息,以便于获取您的打卡位置',
			// 	duration: 0,
			// 	fontSize: 16,
			// 	safeAreaInsetTop: true
			// })
			const systemInfo = uni.getSystemInfoSync()
			if (systemInfo.platform === 'android') {
				permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION').then(res => {
					if (res == 1) {
						this.$refs.uNotify.close()
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								getDistance({
									lng: res.longitude, //经度
									lat: res.latitude //纬度
								}).then(res => {
									if (res.code == 1) {
										this.isClock = true
									} else {
										this.distance = res.data - this.sdistance
									}
								})
							},
							fail: (res) => {
								uni.showToast({
									title: '获取定位失败，请检查网络',
									icon: 'none'
								})
							}
						});
						this.time = setInterval(() => {
							uni.getLocation({
								type: 'gcj02',
								success: (res) => {
									getDistance({
										lng: res.longitude, //经度
										lat: res.latitude //纬度
									}).then(res => {
										console.log(res)
										if (res.code == 1) {
											this.isClock = true
										}
									})
								},
								fail: (res) => {
									uni.showToast({
										title: '获取定位失败，请检查网络',
										icon: 'none'
									})
								}
							});
						}, 5000)
					}
					if (res == 0) {
						this.$refs.uNotify.close()
					}
					if (res == -1) {
						this.$refs.uNotify.show({
							top: 0,
							type: 'error',
							color: '#000',
							bgColor: '#fff',
							message: 'APP需要您的同意才能获取您的位置信息,以便于获取您的打卡位置',
							duration: 0,
							fontSize: 16,
							safeAreaInsetTop: true
						})
						setTimeout(() => {
							permision.gotoAppPermissionSetting()
						}, 500)
					}
				})
			}
			if (systemInfo.platform === 'ios') {
				permision.judgeIosPermission("photoLibrary").then(res => {
					if (res) {
						this.$refs.uNotify.close()
						uni.chooseImage({
							count: 1,
							sourceType: ['camera'],
							 //从相册选择
							success: (res) => {
								this.seleUrl = res.tempFilePaths[0]
								this.uploadFilePromise(this.seleUrl)
							}
						})
					} else {
						setTimeout(() => {
							permision.gotoAppPermissionSetting()
						}, 500)
					}
				})
			}
		},
		onUnload() {
			clearInterval(this.time)
		},
		methods: {
			uploadFilePromise(url) {
				uni.showLoading({
					mask: true,
					title: '系统处理中，请耐心等待'
				})
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://app.guoshangufen.com/api/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							let obj = JSON.parse(res.data)
							console.log(obj)
							signing({
								image: obj.data.url
							}).then(res => {
								console.log(res)
								uni.hideLoading();
								if (res.code == 1) {
									uni.showToast({
										title: '打卡成功',
										icon: 'none'
									})
									let nowTime = new Date();
									let hh = nowTime.getHours();
									let mm = nowTime.getMinutes();
									mm = mm < 10 ? '0' + mm : mm
									this.nowClock = `${hh}:${mm}`;
									this.show = true
									this.daka = true
									this.getSign()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						},
						fail: () => {
							uni.hideLoading();
						}
					});
				})
			},
			clockIn() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						console.log(res)
						this.uploadFilePromise(res.tempFilePaths[0])
					}
				})
			},
			fanwei() {

				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						getDistance({
							lng: res.longitude, //经度
							lat: res.latitude //纬度
						}).then(res => {
							if (res.code == 1) {
								this.isClock = true
							}
						})
					},
					fail: (res) => {
						uni.showToast({
							title: '获取定位失败，请检查网络',
							icon: 'none'
						})
					}
				});
			},
			async getUserInfo() {
				let res = await innerinfo()
				this.userInfo = res.data
			},
			async getSign() {
				this.isShow = false
				let res = await todaySign()
				console.log(res)
				res.data.forEach((item, index) => {
					this.list1.push({
						start: item[0].slice(0, -3),
						end: item[1].slice(0, -3),
						sign_time: item.sign_time
					})
				})
				this.isShow = true
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background-color: #F2F2F2;
		padding: 15px;

		.slot-content {
			.modalCon {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.time {
					color: #0A84FF;
					font-size: 50px;
					margin-bottom: 10px;
				}

				.msg {
					color: #4C83D2;
				}

				.close {
					width: 35px;
					height: 35px;
					position: absolute;
					top: -10px;
					right: -55px;
				}

				.bg {
					width: 207px;
					height: 117px;
				}
			}
		}

		.header {
			padding: 10px 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 14px;

			.left {
				display: flex;

				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 40px;

					.name {
						color: #3D3D3D;
						font-size: 12px;
					}

					.post {
						color: #666666;
						font-size: 12px;
					}
				}

				image {
					width: 40px;
					height: 40px;
					border-radius: 5px;
					margin-right: 10px;
				}
			}

			.right {
				height: 40px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				color: #3D3D3D;

				image {
					width: 17px;
					height: 17px;
				}
			}
		}

		.con {
			padding: 12px 14px 20px;
			background-color: #fff;
			border-radius: 8px;

			.one {
				margin-bottom: 15px;

				h3 {
					color: #3D3D3D;
					margin-bottom: 10px;
					font-size: 16px;
					font-weight: 700;
				}

				.in {
					display: flex;
					justify-content: space-between;

					.box {
						width: 45%;
						padding: 7px 0px 7px 13px;
						background-color: #EBEBEB;
						border-radius: 7px;

						.time {
							color: #232323;
							margin-bottom: 3px;
						}

						.msg {
							.on {
								display: flex;
								font-size: 12px;
								color: #6B6F73;
								align-items: center;

								image {
									width: 11px;
									height: 11px;
									margin-right: 5px;
								}
							}
						}
					}
				}
			}

			.btn {
				width: 144px;
				height: 144px;
				border-radius: 1000px;
				margin: 0 auto;
				background: linear-gradient(180deg, #449AF3 0%, #3C88F3 100%);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 22px;
				margin-bottom: 15px;
			}

			.none {
				background: #ccc;
			}

			.prompt {
				font-size: 12px;
				text-align: center;
				color: #6E7074;
			}
		}
	}
</style>